<template>
	<view class="rows p-left20 p-right20 p-top20 p-bot50" v-if="config.length" :style="{'--color': color}">




		<block v-for="(item,index) in config" :key="item.config_id">
			<view class="row a-center m-bot20" v-if="item.config_id == 11207">
				<text class="size30 bold">{{item.config_name}}</text>
				<input type="number" class="flex-1 input m-left20 p-left20" v-model="item.config_content"
					:placeholder="`请输入${item.config_name}`" placeholder-class="placeholder">
			</view>
		</block>



		<block v-for="(item,index) in config" :key="item.config_id">

			<view v-if="item.config_type == 1 && item.config_state == 1 && item.config_id != 11207">
				<!--  当行输入框 -->
				<view class="row a-center list">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'">
					</view>
					<input type="text" v-model="item.config_content" class="flex-1  m-left10 input"
						:placeholder="`请输入${item.config_name}`" placeholder-class="placeholder">
				</view>

				<!--  获取验证码 -->
				<view class="row a-center list" v-if=" item.config_id == 11205  && ordInfo.verification == 1">
					<view class="iconfont icon-a-lujing3094 color h7"></view>
					<input type="number" v-model="ordInfo.verCode" class="flex-1 m-left10 input" placeholder="请输入验证码"
						placeholder-class="placeholder">
					<view class="Code flexac" @click="getCodeBtn">{{isFlag?'获取验证码':`${dowtTime}S`}}</view>
				</view>
			</view>

			<!-- 下拉框 -->
			<view class="row a-center list" v-if="item.config_type == 2 && item.config_state == 1">
				<view class="iconfont icon-a-lujing3094  h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<input type="text" disabled v-model="item.config_content" class="flex-1 m-left10 input"
					:placeholder="`请选择${item.config_name}`" placeholder-class="placeholder">
				<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
				<picker mode="selector" :range="item.list" @change="choose($event,item.config_id)" class="picker">
				</picker>
			</view>



			<!-- 单选 -->
			<view class="Multiple" v-if="item.config_type == 9 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094  h7" :class="item.config_must == 1?'color':'color_F7'">
					</view>
					<text class="size26 color_80 m-left10">{{item.config_name}}</text>
				</view>
				<view class="row">
					<block v-for="(subItem,subIndex) in item.list" :key="subIndex">
						<view class="d-flex a-center Single" :class="{'selectItem':subItem == item.config_content}"
							@click="SingleBtn(item.config_id,subItem)">
							<view class="singleBox flexac">
								<view class="minSingle"></view>
							</view>
							<text class="color_64 size30 m-left10">{{subItem}}</text>
						</view>
					</block>
				</view>
			</view>

			<!--  多选 -->
			<view class="Multiple" v-if="item.config_type == 5 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'">
					</view>
					<text class="size26 color_80 m-left10">{{item.config_name}}</text>
				</view>
				<view class="row  f-wrap">
					<block v-for="(subItem,subIndex) in item.list" :key="subIndex">
						<view class="d-flex a-center selectList"
							:class="{'select':item.flagItem.indexOf(subItem) != -1}"
							@click="choice(item.config_id,subItem)">
							<view class="box flexac">
								<view class="iconfont icon-xuanzhong white h6"></view>
							</view>
							<text class="color_64 size30 m-left10">{{subItem}}</text>
						</view>
					</block>
				</view>
			</view>

			<!--  日期 -->
			<timepicker @btnConfirm="btnConfirm2($event,item.config_id)" :showType="item.dateTimeType"
				v-if="item.config_type == 10 && item.config_state == 1">
				<view class="row a-center list">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'">
					</view>
					<input type="text" disabled class="flex-1 m-left10 input" v-model="item.config_content"
						:placeholder="`请选择${item.config_name}`" placeholder-class="placeholder">
					<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
				</view>
			</timepicker>

			<!-- 省市区 -->
			<view class="row a-center list" @click="showAddPicker(item.config_id)"
				v-if="item.config_type == 6 && item.config_state == 1">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<input type="text" disabled class="flex-1 m-left10 input" v-model="item.config_content"
					:placeholder="`请选择${item.config_name}`" placeholder-class="placeholder">
				<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
			</view>


			<!-- 上传图片 -->
			<view class="Multiple" v-if="item.config_type == 8 && item.config_state == 1">
				<view class="d-flex a-center selectTitle">
					<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'">
					</view>
					<text class="size26 color_80 m-left10">{{item.config_name}}</text>
				</view>
				<view class="row">
					<block v-for="(subItem,subIndex) in item.imglist" :key="subIndex">
						<view class="imglist">
							<image :src="$imgUrls(subItem)" mode="aspectFill" class="wh bor_radius_10"></image>
							<image :src="$bossImg('1.png')" class="closeImg"
								@click.stop="delImg(item.config_id,subIndex)"></image>
						</view>
					</block>
					<view class="uploadImg flexac" @click="uploadImg(item.config_id,item.limit)"
						v-if="item.imglist.length < item.limit">
						<view class="iconfont icon-tianjia size54 color_cc"></view>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="row bgf7 padding20 bor_radius_10 m-bot20"
				v-if="item.config_type == 4 && item.config_state == 1">
				<textarea disable-default-padding class="textarea" v-model="item.config_content"
					:placeholder="`请输入${item.config_name}`" placeholder-class="placeholder"></textarea>
			</view>
		</block>



		<view class="submit d-flex j-sb">
			<view class="subList flexac cancel size30" @click="cancelBtn">取消</view>
			<view class="subList flexac white bg33 size36" @click="subMit">{{subText}}</view>
		</view>


		<mpvueCityPicker :shixian2='shixian2' :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			@onCancel='shixian2 = false'></mpvueCityPicker>

		<showModel v-if="showModel" @hideModel="showModel = false"></showModel>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import timepicker from '@/components/time-picker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		name: 'from',
		props: ['order_id', 'v_id', 'VeriCode'],
		components: {
			timepicker,
			mpvueCityPicker
		},
		data() {
			return {
				color: getApp().globalData.color,
				showModel: false,
				ordId: 2266,
				dowtTime: 60,
				countdown: null,
				isFlag: true,
				ordInfo: '',
				config: '',
				check_info: '', //sncode_flag 0 审核中 2 审核拒绝
				shixian2: false,

				cityPickerValueDefault: [0, 0, 1], // 默认选择地址
				cityIndex: 0,

			}
		},


		methods: {
			customForm() {
				this.$http.post({
					url: '/SRA_CustomerForm/customForm',
					data: {
						ordId: this.ordId,
						VeriCode: this.VeriCode ? this.VeriCode : this.bid,
						v_id: this.v_id ? this.v_id : this.vid
					}
				}).then(res => {
					if (res.code != 100) return;
					let result = res.data;
					result.config.forEach((item, index) => {
						if (item.config_type == 2 || item.config_type == 5 || item.config_type == 9) {
							item.list = item.config_content.split('|');
							item.config_content = '';
							item.flagItem = [];
						}
						if (item.config_type == 8) { // 上传图片 
							item.config_content = '';
							item.imglist = [];
						}
						if (item.config_type == 1 || item.config_type == 4 || item.config_type == 6 || item
							.config_type == 10 && item.now_value) {
							item.config_content = item.now_value;
						}
						if (item.config_type == 5 && item.now_value) {
							item.flagItem = item.now_value;
							item.config_content = item.now_value.toString();
						}
						if (item.config_type == 2 || item.config_type == 9 && item.now_value) item
							.config_content = item.now_value;
						if (item.config_type == 8 && item.now_value) {
							item.imglist = item.now_value
							item.config_content = item.now_value.toString();
						};
					})
					if (this.userInfo.nickname) result.config[0].config_content = this.userInfo.nickname
					if (this.userInfo.phone) result.config[1].config_content = this.userInfo.phone
					this.config = result.config;
					if (result.ordInfo.verification == 1) result.ordInfo.verCode = '';
					this.ordInfo = result.ordInfo;
					if (result.check_info) this.check_info = result.check_info;
					this.$BarTitle(result.ordInfo.order_title);

				})
			},


			subMit() {

				if (this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示', this.check_info
					.sncode_content);
				let popTxt = '不能为空';
				for (var i = 0; i < this.config.length; i++) {
					let item = this.config[i];
					if (item.config_type == 1 && item.config_content == '' && item.config_must == 1) {
						this.$Toast(item.config_name + popTxt)
						return false;
					}
					if (!this.$reg.phone.test(this.config[1].config_content) && i == 1 && this.config[1].config_content !=
						'') {
						this.$Toast('请输入正确的手机号码！')
						return false;
					}
					if (item.config_type == 2 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请选择' + item.config_name + '!')
						return false;
					}
					if (item.config_type == 5 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请选择' + item.config_name + '!')
						return false;
					}
					if (item.config_type == 6 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请选择' + item.config_name + '!')
						return false;
					}
					if (item.config_type == 8 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请上传' + item.config_name + '!')
						return false;
					}
					if (item.config_type == 9 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请选择' + item.config_name + '!')
						return false;
					}
					if (item.config_type == 10 && item.config_must == 1 && item.config_content == '') {
						this.$Toast('请选择' + item.config_name + '!')
						return false;
					}
				}
				if (this.ordInfo.verCode == '' && this.ordInfo.verification == 1) return this.$Toast('请输入验证码!');

				let params = {
					'VeriCode': this.VeriCode ? this.VeriCode : this.bid,
					'ordId': this.ordId,
					'jsCode': this.v_id ? this.v_id : this.vid,
					'verification': this.ordInfo.verCode
				}
				if (this.ordId == '2270') {
					params.source_bid = uni.getStorageSync('bid')
					params.source_v_id = uni.getStorageSync('vid')
					params.source_open_id = uni.getStorageSync('openid')
				}
				console.log('addFrom params', params)
				this.config.forEach((item, index) => {
					let name = 'name' + index;
					params[name] = item.config_content;
				})
				this.$showLoading('提交中~')
				this.$http.post({
					url: '/zzj_singleSaleApi/addFrom',
					data: params
				}).then(res => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.data);
					if (res.jump_pay == 0) this.$Modal('提示', res.data);
					if (res.jump_pay == 2) {
						this.$Modal('支付', res.data).then(res1 => {
							if (res1) this.getPlayinfo(res.sncode_id)
						});
					}
					this.$emit('submit');

				})
			},

			getPlayinfo(sncode_id) {
				this.$http.post({
					url: '/accountPay/getSncodePay',
					data: {
						sncode_id: sncode_id,
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg);
					this.$getPayment(res.data).then(res1 => {
						if (res1) this.$Toast('支付成功');
					})

				})
			},

			// 日期
			btnConfirm2(event, id) {
				let index = this.config.findIndex((n) => n.config_id == id);
				this.config[index].config_content = event.key
			},


			// 省市区
			showAddPicker(id) {
				let index = this.config.findIndex((n) => n.config_id == id);
				this.cityIndex = index;
				this.shixian2 = true;
			},
			onConfirm(event) {
				this.config[this.cityIndex].config_content = event.label;
				this.shixian2 = false;
			},


			choose(event, id) {
				let index = this.config.findIndex((n) => n.config_id == id);
				this.config[index].config_content = this.config[index].list[event.detail.value];
			},

			// 单选
			SingleBtn(id, item) {
				let index = this.config.findIndex((n) => n.config_id == id);
				this.config[index].config_content = item;
			},
			// 多选
			choice(id, item) {
				let index = this.config.findIndex((n) => n.config_id == id);
				if (this.config[index].flagItem.indexOf(item) == -1) {
					this.config[index].flagItem.push(item)
				} else {
					let indexof = this.config[index].flagItem.indexOf(item);
					this.config[index].flagItem.splice(indexof, 1)
				}
				this.config[index].config_content = this.config[index].flagItem.toString();
			},

			// 上传图片
			uploadImg(id, limit) {
				let that = this;
				let Index = this.config.findIndex((n) => n.config_id == id);
				let count = this.config[Index].imglist.length - limit;
				uni.chooseImage({
					count: count,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						that.$showLoading('上传中~')
						let tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((item, index) => {
							that.$common.uploadFile(item).then(res1 => {
								that.$hideLoading();
								if (res1.errcode != 100) return that.$Toast("上传失败~");
								let imgItem = res1.url.substring(22, res1.url.length);
								let list = that.config[Index].imglist;
								list.push(imgItem);
								that.config[Index].config_content = that.config[Index].imglist
									.toString();
							})
						})
					}
				})
			},
			delImg(id, subIndex) {
				let Index = this.config.findIndex((n) => n.config_id == id);
				this.config[Index].imglist.splice(subIndex, 1);
			},
			getCodeBtn() {
				if (!this.vid) return this.showModel = true;
				if (this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示', this.check_info
					.sncode_content);
				if (!this.isFlag) return;
				let config_content = this.config[1].config_content;
				if (!config_content) return this.$Toast("请输入手机号码！");
				if (!this.$reg.phone.test(config_content)) return this.$Toast("手机号码输入有误！");
				this.$http.post({
					url: '/SRA_CustomerForm/verification_code',
					data: {
						ordId: this.ordId,
						phone: config_content,
					}
				}).then(res => {
					if (res.code != 1000) return this.$Toast(res.cont);
					this.isFlag = false;
					this.countdown = setInterval(() => {
						if (this.dowtTime > 1) return this.dowtTime--;
						clearInterval(this.countdown);
						this.isFlag = true;
					}, 1000)
				})

			},

			cancelBtn() {
				this.$emit('cancelUp')
			}

		},
		computed: {
			...mapState(['bid', 'vid', 'userInfo']),
			subText() {
				if (this.order_id != 2270) return this.ordInfo.price > 0 ? `支付${this.ordInfo.price}` : '立即报名'
				return this.ordInfo.order_title;
			}
		},
		watch: {
			order_id: {
				deep: true,
				immediate: true,
				handler(newVal) {
					if (!newVal) return;
					this.ordId = newVal;
					this.customForm();
				}
			}

		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f9fa;
	}
</style>
<style lang="scss" scope>
	.input {
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 26rpx;
		color: #333333;
	}

	.Make {
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		padding-left: 20rpx;
	}

	.Make::after {
		content: '';
		width: 10rpx;
		height: 32rpx;
		background-color: #000000;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.list {

		height: 80rpx;
		background-color: #F7F9FA !important;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.list input {
		background-color: #F7F9FA !important;
	}

	.icon-a-lujing3094 {
		zoom: 0.6;
	}

	::v-deep.placeholder {
		color: #B3B3B3;
	}

	.picker {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
	}

	.Code {
		width: 156rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background-color: #FFEFF5;
		color: #E61616;
		font-size: 24rpx;
	}

	.Multiple {
		width: 100%;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		background-color: #F7F9FA;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}

	.selectTitle {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.selectList,
	.Single {
		margin: 20rpx 30rpx 0 20rpx;
	}

	.selectList .box {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #ccc;
		border-radius: 4rpx;
	}

	.select .box {
		border: 1rpx solid var(--color);
		background-color: var(--color);
	}

	.Single .singleBox {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
	}

	.Single .minSingle {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background-color: #ffffff;
	}

	.selectItem .singleBox {
		border: 1rpx solid #E61616;
	}

	.selectItem .minSingle {
		background-color: #E61616;
	}

	.imglist {
		width: 150rpx;
		height: 150rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
	}

	.closeImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}

	.uploadImg {
		width: 150rpx;
		height: 150rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border: 1rpx solid #cccccc;
	}

	.textarea {
		width: 100%;
		height: 240rpx;
		padding-left: 12rpx;
		font-size: 26rpx;
		color: #333333;
		position: relative;
	}

	.textarea::after {
		content: '';
		width: 2rpx;
		height: 24rpx;
		background-color: #000000;
		position: absolute;
		left: 0;
		top: 19rpx;
		transform: translate(0, -50%);
	}

	.agree {
		width: 32rpx;
		height: 32rpx;
		background-color: #ffffff;
		border: 1rpx solid #ccc;
		border-radius: 4rpx;
	}

	.submit {
		width: 100%;
		padding: 0 30rpx;
		margin: 56rpx auto 0;
	}

	.subList {
		width: 270rpx;
		height: 87rpx;
		border-radius: 10rpx;
	}

	.cancel {
		border: 1px solid #333333;
	}
</style>